<template>
	<el-main>
		<el-card shadow="never">
			<el-tabs tab-position="top">
				<el-col :lg="{span: 8, offset: 0}">
					<el-tab-pane label="系统设置">
						<el-form ref="form" :model="website" label-width="100px" style="margin-top: 20px;">
							<el-form-item label="系统名称"  width="120">
								<el-input v-model="website.name"></el-input>
							</el-form-item>
							<el-form-item label="网站图标">
								<sc-upload v-model="website.web_favicon"></sc-upload>
								<div class="el-form-item-msg">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
							</el-form-item>
							<el-form-item label="网站LOGO">
								<sc-upload v-model="website.web_logo"></sc-upload>
								<div class="el-form-item-msg">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
							</el-form-item>
							<el-form-item label="登录页广告图">
								<sc-upload v-model="website.login_image"></sc-upload>
								<div class="el-form-item-msg">建议尺寸：100*100像素，支持jpg，jpeg，png格式</div>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="setWebsite()">保存</el-button>
							</el-form-item>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="备案信息">
						<el-alert title="站点底部版权备案信息设置。" type="warning" style="margin-bottom: 15px;"></el-alert>
						<el-form ref="form" :model="config" label-width="100px" style="margin-top: 20px;">
							<el-form-item label="显示名称">
								<el-input v-model="config.name"></el-input>
							</el-form-item>
							<el-form-item label="跳转链接">
								<el-input v-model="config.url" ></el-input>
								<div class="el-form-item-msg">跳转链接不设置，则不跳转</div>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="setCopyright()">保存</el-button>
							</el-form-item>
						</el-form>
					</el-tab-pane>
				</el-col>
			</el-tabs>
		</el-card>
	</el-main>
</template>

<script>
	export default {
		name: 'system',
		data() {
			return {
				website: {
					name: "",
					web_favicon: "",
					web_logo: "",
					login_image: ""
				},
				config: {
					name: "",
					url: ""
				}
			}
		},
		mounted() {
			this.table_info();
			this.getCopyright()
		},
		methods: {
			async table_info(){
				var res = await this.$API.setting.sys.getWebsite.get();
				if (res.code == 1) {
					this.website.name = res.data.name
					this.website.web_favicon = res.data.web_favicon
					this.website.web_logo = res.data.web_logo
					this.website.login_image = res.data.login_image
				}
			},
			async getCopyright(){
				var res = await this.$API.setting.sys.getCopyright.get();
				if (res.code == 1) {
					this.config.name = res.data.name
					this.config.url = res.data.url
				}
			},
			async setWebsite(){
				var res = await this.$API.setting.sys.setWebsite.post(this.website);
				if(res.code == 1){
					this.$emit('success', this.form, this.mode)
					this.visible = false;
					this.$message.success("操作成功")
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
			async setCopyright(){
				var res = await this.$API.setting.sys.setCopyright.post({config:this.config});
				if(res.code == 1){
					this.$emit('success', this.form, this.mode)
					this.visible = false;
					this.$message.success("操作成功")
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
		}
	}
</script>

<style>
</style>
